<template>
  <div class="map-tree" v-if="navigationIndex === 2">
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"  highlight-current></el-tree>
  </div>
</template>

<script>
import TileLayer from "@arcgis/core/layers/TileLayer.js"; // 加载切片图层
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js"; // 加载要素图层
export default {
  name: "mapTree",
  props:['navigationIndex'],
  data() {
    return {
      data: [{
        label: '地图数据',
        children: [{
          label: '暖色系',
          layerid:'layerid',
          type:'TileLayer',
          larerurl:'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer',
        },{
          label: '灰色系',
          layerid:'layerid',
          type:'TileLayer',
          larerurl:'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer',
        }]
      }, {
        label: '行政区划数据',
        children: [{
          label: '省数据',
          layerid:'layerid',
          type:'FeatureServer',
          larerurl:'https://services2.arcgis.com/NJdcylBy9exOSld0/arcgis/rest/services/economize_webMokaTuo/FeatureServer',
        },{
          label: '市数据',
          layerid:'layerid',
          type:'FeatureServer',
          larerurl:'https://services2.arcgis.com/NJdcylBy9exOSld0/arcgis/rest/services/market_webMokaTuo/FeatureServer',
        },{
          label: '县数据',
          layerid:'layerid',
          type:'FeatureServer',
          larerurl:'https://services2.arcgis.com/NJdcylBy9exOSld0/arcgis/rest/services/county_webMokaTuo/FeatureServer',
        }]
      }, {
        label: '业务数据',
        children: [{
          label: '火车站点',
          layerid:'layerid',
          type:'FeatureServer',
          larerurl:'https://services2.arcgis.com/NJdcylBy9exOSld0/arcgis/rest/services/trainStation_Project/FeatureServer',
        },{
          label: '火车线路',
          layerid:'layerid',
          type:'FeatureServer',
          larerurl:'https://services2.arcgis.com/NJdcylBy9exOSld0/arcgis/rest/services/railway_Project/FeatureServer',
        },{
          label: '卷帘分析Top',
          layerid:'swipeLearyTop',
          type:'FeatureServer',
          larerurl:'https://services2.arcgis.com/NJdcylBy9exOSld0/arcgis/rest/services/economize_webMokaTuo/FeatureServer',
        },{
          label: '卷帘分析Bottom',
          layerid:'swipeLearyBottom',
          type:'FeatureServer',
          larerurl:'https://services2.arcgis.com/NJdcylBy9exOSld0/arcgis/rest/services/market_webMokaTuo/FeatureServer',
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  methods:{
    async handleNodeClick(data) {
      if (data.larerurl) {
        // 默认地图数据
        const mapView = this.$store.state.mapView;
        // 获取当前添加到地图上的图层，不包括底图
        const resultLayer = mapView.map.findLayerById(data.layerid);
        // 如果已经添加了图层，那么就把他删除了
        if (resultLayer) mapView.map.remove(resultLayer);
        let layer = '';
        if (data.type === 'TileLayer') {
          console.log(data.type);
          layer = new TileLayer({
            url: data.larerurl,
            id:data.layerid
          })
        } else if (data.type === 'FeatureServer') {
          console.log(data.type);
          layer = new FeatureLayer({
            url: data.larerurl,
            id:data.layerid,
            outFields: ["*"],
          })
        }
        // 把 layer 添加到地图
        mapView.map.add(layer)
      }
    }
  },
}
</script>

<style scoped>
.map-tree {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 425px;
  height: 300px;
  background: #ffffff;
  padding: 10px;
  box-sizing: border-box;
}
</style>